<template>
	<view class="container" v-if="content">
		<view class="circle tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column" v-if="!showLog">
			<text>正确率{{content.score}}</text>
			<text>预估单词量{{total}}</text>
			<text class="tn-color-gray">{{type==0?'视辨测试':'听辨测试'}}</text>
			<text @click="showLog=true" class="tn-color-orangeyellow">查看结果</text>
		</view>
		<view class="record" v-if="showLog">
			<view class="item tn-flex tn-flex-col-center  tn-flex-row-center tn-flex-direction-column" v-for="(item,index) in content.words">
				<view class="index tn-color-black">{{index+1}}</view>
				<text :class="[content.content[index]?'success' :'error','tn-text-xxl']">{{item.word}}</text>
				<text class="tn-color-grey">{{item.explain}}</text>
				<text :class="[content.content[index]?'success' :'error']">{{content.content[index] ? '正确':'错误'}}</text>
			</view>
			<button class="close tn-bg-blue--light" @click="showLog=false">确定</button>
		</view>
	</view>
</template>


<script>
	const pageDataCenter = uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	let timer
	export default {
		data() {
			return {
				id: '',
				score: 8,
				progress: '0%',
				content: null,
				showLog:false,
				type:0
			}
		},
		onLoad(e) {
			this.id=e.id
			this.type=e.type || 0
			this.getData(e.id,e.type || 0)
		},
		computed: {
			total(){
				let score=this.content ? parseInt(this.content.score): 0
				return (score/100).toFixed(2)*1000
			}
		},
		methods: {
			getData(id,type=1) {
				pageDataCenter.getTestDetail(id,type).then((res) => {
					console.log(res)
					if(res.code){
						this.content=res.data
					}else{
						uni.showToast({
							title:'暂无数据',
							icon:'none'
						})
					}
					
				})
			},
		},
		}
</script>

<style scoped>
	.circle{
		background-color: #eee;
		position: fixed;
		width: 80%;
		height: 300px;
		left: 10%;
		top: 30%;
		padding: 30px;
		color: #00aaff;
		font-size: 18px;
		border-radius: 10px;
	}
	.item{
		background-color: #f1f1f1;
		margin: 10px 0;
		padding: 20px 0;
		position: relative;
	}
	text{
		margin: 5px 0;
	}
	text:first-child{
		color: #ff5500;
	}
	text:last-child{
		color: #999;
		font-size: 14px;
	}
	text.success{
		color: #00dc00;
	}
	text.error{
		color: #ff5500;
	}
	.index{
		position: absolute;left: 10px;
		top: 10px;
		color: #666;
		font-size: 20px;
		font-weight: 700;
	}
	.close{
		position: fixed;
		bottom: 20px;
		width: 80%;
		left: 10%;
	}
</style>